<template>
  <q-dialog v-model="showInstructionsDialog" persistent>
    <q-card style="min-width: 350px; max-width: 800px">
      <q-card-section class="row items-center">
        <div class="text-h6">使用说明</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>

      <q-card-section>
        <q-tabs
          v-model="activeTab"
          dense
          class="text-grey"
          active-color="primary"
          indicator-color="primary"
          align="justify"
          narrow-indicator
        >
          <q-tab name="instructions" label="使用说明" />
          <q-tab name="changelog" label="更新日志" />
        </q-tabs>

        <q-separator />

        <q-tab-panels v-model="activeTab" animated>
          <!-- 使用说明面板 -->
          <q-tab-panel name="instructions">
            <div class="text-subtitle2 q-mb-md">智能出题</div>
            <ul>
              <li>选择年级：目前支持一年级</li>
              <li>选择题型：支持加减法混合</li>
              <li>设置题目数量：建议每次练习10-20题</li>
              <li>设置难度：根据学生水平选择合适的难度</li>
              <li>点击"开始练习"生成题目</li>
            </ul>

            <div class="text-subtitle2 q-mb-md">练习过程</div>
            <ul>
              <li>每道题目有计时功能</li>
              <li>输入答案后按回车或点击下一题</li>
              <li>可以随时暂停练习</li>
              <li>练习完成后自动保存记录</li>
            </ul>

            <div class="text-subtitle2 q-mb-md">拍照批改</div>
            <ul>
              <li>支持拍照或上传图片</li>
              <li>自动识别手写答案</li>
              <li>显示批改结果和正确率</li>
              <li>自动记录错题</li>
            </ul>

            <div class="text-subtitle2 q-mb-md">结果分析</div>
            <ul>
              <li>查看练习历史记录</li>
              <li>分析正确率趋势</li>
              <li>查看错题集</li>
              <li>支持生成错题专项练习</li>
            </ul>

            <div class="text-subtitle2 q-mb-md">其他功能</div>
            <ul>
              <li>支持导出PDF练习卷</li>
              <li>支持用户注册和登录</li>
              <li>数据云端同步</li>
              <li>支持移动端使用</li>
            </ul>
          </q-tab-panel>

          <!-- 更新日志面板 -->
          <q-tab-panel name="changelog">
            <div class="text-subtitle2 q-mb-md">v1.0.0 (2024-05-24)</div>
            <ul>
              <li>完成基础功能开发</li>
              <li>支持智能出题和在线练习</li>
              <li>支持拍照批改功能</li>
              <li>添加结果分析页面</li>
              <li>实现用户系统</li>
            </ul>

            <div class="text-subtitle2 q-mb-md">v1.1.0 (计划中)</div>
            <ul>
              <li>优化PDF导出功能</li>
              <li>添加耗时分析功能</li>
              <li>增强错题集功能</li>
              <li>添加巩固练习功能</li>
              <li>实现智能错题管理</li>
            </ul>
          </q-tab-panel>
        </q-tab-panels>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat label="关闭" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showInstructionsDialog = ref(false);
const activeTab = ref('instructions');

defineExpose({
  showInstructionsDialog
});
</script> 